<div
  x-data="{ icons: [
    { name: 'moon', status: 'y' },
    { name: 'sunny', status: 'n' },
    { name: 'desktop', status: 'auto' }
  ] }"
  class="flex items-center h-[32px] px-2 gap-2 border border-base-300 rounded-full"
>
  <template x-for="icon in icons">
    <div
      role="button"
      tabindex="0"
      :aria-label="'Select ' + icon.name + ' mode'"
      class="group inline-flex justify-center items-center p-1 rounded-full cursor-pointer hover:bg-primary"
      :class="$store.darkMode.icon() === icon.name && 'bg-primary'"
      @click="$store.darkMode.toggle(icon.status)"
    >
      <ion-icon
        :name="`${icon.name}-outline`"
        class="group-hover:text-primary-content"
        :class="$store.darkMode.icon() === icon.name && 'text-primary-content'"
      >
      </ion-icon>
    </div>
  </template>
</div>
